@extends('layouts.console_header')

@section('title', '所有评价列表')

@section('resources')
    @parent
    <style>
        .user_list_search{overflow: hidden;margin: 10px 20px;}
        .user_list_search input{float: right;width: 200px;height: 30px;border: 1px solid #000;}
        .user_list_search .user_list_searchbtn{float: right;height: 30px;margin-left: 10px;width: 50px;background-color: #9955c6;color: #fff;border: none;}
        .user_list_pageouter{overflow: hidden;background-color: #fff;}
        .user_list_page{float: right;overflow: hidden;}
        .user_list_page a{float: left;width: 40px;height: 30px;line-height: 30px;text-align: center;}
        .user_list_page .show{background-color: #eee;border: 1px solid #ccc;}
        .display{text-align: center;background-color: #fff;border-collapse:collapse;}
        .display th{padding: 20px 0;}
        .display #tbody_content{border-top: 1px solid #000;border-bottom: 1px solid #000;font-size: 14px;}
        .display #tbody_content tr:nth-child(2n+1){border-bottom: 1px solid #ddd;background-color: #f9f9f9;}
        .display #tbody_content tr:nth-child(2n){border-bottom: 1px solid #ddd;}
        .display #tbody_content tr td{padding: 10px;}
        .display #tbody_content tr td:nth-child(1){background-color: #f1f1f1;}
        nav{height: 50px;line-height: 50px;}
        nav a,nav span{margin-left: 20px;}
        nav input{margin-left: 20px;height: 28px;border: 1px solid #000;margin-top: 10px;}
        .bigpic_out{position: fixed;width: 100%;top: 0;left: 0;display: none;background: rgba(0,0,0,0.5);}
        .bigpic_out .bigpic_img{position: fixed;width: 100%;top: 0;left: 0;}
        .bigpic_out .bigpic_img img{display: none;}
        .bigpic_out .bicpic_close{position: absolute;top: 50px;right: 50px;}
        .bigpic_out .bigpic_img .pic_show{display: block;margin: 30px auto;}
        .bigpic_out .pic_left{width: 34px;height: 60px;font-size: 40px;text-align: center;line-height: 100px;position: absolute;top: 50%;left: 100px;margin-top: -30px;cursor: pointer;}
        .bigpic_out .pic_right{width: 34px;height: 60px;font-size: 40px;text-align: center;line-height: 100px;position: absolute;top: 50%;right: 100px;margin-top: -30px;cursor: pointer;}
        .bigpic_out .bicpic_close{cursor: pointer;}
        .bigpic_out .pic_num{position: fixed;bottom: 50px;left: 49%;color: #fff;font-size: 18px;padding: 5px 10px;background: rgba(0,0,0,0.5);}
    </style>
@endsection

@section('content')
<section class="user_list">
    <p class="fz_14 account_title">
        <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>订单管理></span>
        <span class="co_violet">评价列表</span>
    </p>
    <nav>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=today">今日</a>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=yesterday">昨日</a>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=week">本周</a>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=thismonth">本月</a>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=lastmonth">上月</a>
        <a class="fl" href="/console/order/comment/list?cityid={{$cityid}}&type=all">全部</a>
        <span class="fl">时段选择</span>
        <input class="fl" type="date" name="starttime" value="{{date('Y-m-d', strtotime($starttime))}}" onchange="select_date()">
        <span class="fl">至</span>
        <input class="fl" type="date" name="lasttime" value="{{date('Y-m-d', strtotime($lasttime))}}" onchange="select_date()">
    </nav>
    <p class="user_list_search">
        <input class="user_list_searchbtn" type="button" name="submit_search" value="搜索">
        <input type="text" name="search" value="" placeholder="搜索">
    </p>
    <table class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>用户昵称</th>
                <th>用户账号</th>
                <th>门店名称</th>
                <th>评价时间</th>
                <th>评分</th>
                <th>评价内容</th>
                <th>评价图片</th>
                <th style="width: 60px;">操作</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>用户昵称</th>
                <th>用户账号</th>
                <th>门店名称</th>
                <th>评价时间</th>
                <th>评分</th>
                <th>评价内容</th>
                <th>评价图片</th>
                <th>操作</th>
            </tr>
        </tfoot>
        <tbody id="tbody_content">
            @foreach($lists as $list)
                <tr>
                @if(!isset($i))
                    <td>{{$i=($page-1)*$perpage+1}}</td>
                @else
                    <td>{{++$i}}</td>
                @endif
                    {{--<td>{{$list['commentid']}}</td>--}}
                    <td>{{$list['ordernumber']}}</td>
                    <td>{{$list['nickname']}}</td>
                    <td>{{$list['mobile']}}</td>
                    <td>{{$list['shopname']}}</td>
                    <td>{{date('Y-m-d H:i', strtotime($list['created_at']))}}</td>
                    <td>{{$list['score']}}</td>
                    <td>{{$list['content']}}</td>
                    @if(count($list['picturearray']) == 1)
                        <td>
                            <img style="width: 100px;height: 50px;" src="{{env('IMAGE_DOMAIN')}}{{$list['picturearray']['0']}}" alt="" onclick="show_pic('{{$list['picture']}}')">
                        </td>
                    @elseif(count($list['picturearray']) > 1)
                        <td>
                            <img style="width: 100px;height: 50px;" src="{{env('IMAGE_DOMAIN')}}{{$list['picturearray']['0']}}" alt="" onclick="show_pic('{{$list['picture']}}')">共{{count($list['picturearray'])}}张
                        </td>
                    @else
                        <td>
                            无
                        </td>
                    @endif
                    <td>
                        <a class="co_red delete_btn" href="" onclick="delete_comment({{$list['commentid']}})">删除</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="user_list_pageouter">
        <p class="user_list_page">
            <a href="/console/order/comment/list?cityid={{$cityid}}&page=1&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">首页</a>
            @if($lastpage <=5)
                @for($i=1; $i<=$lastpage; $i++)
                    @if($page == $i)
                        <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$i}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}" class="show">{{$i}}</a>
                    @else
                        <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$i}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$i}}</a>
                    @endif
                @endfor
            @else
                @if($page>2)
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page-2}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page-2}}</a>
                @endif
                @if($page>1)
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page-1}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page-1}}</a>
                @endif
                <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}" class="show">{{$page}}</a>
                @if(($page+5)<$lastpage)
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page+1}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page+1}}</a>
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page+2}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page+2}}</a>
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page+3}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page+3}}</a>
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page+4}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page+4}}</a>
                    <a href="">....</a>
                    <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$lastpage}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$lastpage}}</a>
                @else
                    @for($i=1; $i<=5;$i++)
                        @if($page+$i<=$lastpage)
                            <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$page+$i}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">{{$page+$i}}</a>
                        @endif
                    @endfor
                @endif
            @endif
            <a href="/console/order/comment/list?cityid={{$cityid}}&page={{$lastpage}}&starttime={{date('Y-m-d', strtotime($starttime))}}&lasttime={{date('Y-m-d', strtotime($lasttime))}}&search={{$search}}">末页</a>
        </p>
    </div>
</section>
<div class="bigpic_out">
    <p class="bigpic_img"></p>
    <img class="bicpic_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png"" alt="">
    <img class="pic_left" src="/images/pc/left.png?v={{env('IMAGE_VERSION')}}" alt="">
    <img class="pic_right" src="/images/pc/right.png?v={{env('IMAGE_VERSION')}}" alt="">
    <p class="pic_num"></p>
</div>
@endsection

@section('scriptResources')
    @parent
<!-- js 文件-->
<script>
    var cityid='{{$cityid}}';
    var starttime='{{$starttime}}';
    var lasttime='{{$lasttime}}';
    var imagedomain = '{{env('IMAGE_DOMAIN')}}';
    function get_picture(picture) {
        console.log(picture);
    }
//    $(document).ready(function(){
//        $(".delete_btn").click(function(){
//            $(".delete").show();
//        })
//        $(".delete li img").click(function(){
//            $(".delete").hide();
//        })
//    })
    var str = window.location.href;
    if(str.indexOf("today") > 0){
        $("nav a").eq(0).css({"color": "#9955c6"});
    }else if(str.indexOf("yesterday") > 0){
        $("nav a").eq(1).css({"color": "#9955c6"});
    }else if(str.indexOf("week") > 0){
        $("nav a").eq(2).css({"color": "#9955c6"});
    }else if(str.indexOf("thismonth") > 0){
        $("nav a").eq(3).css({"color": "#9955c6"});
    }else if(str.indexOf("lastmonth") > 0){
        $("nav a").eq(4).css({"color": "#9955c6"});
    }else if(str.indexOf("all") > 0){
        $("nav a").eq(5).css({"color": "#9955c6"});
    }
    function select_date() {
        var startTime = $("input[name='starttime']").val();
        var lastTime = $("input[name='lasttime']").val();
        if(!startTime || !lastTime) {
            alert('请选择开始时间和结束时间'); return;
        }
        window.location.href="/console/order/comment/list?cityid=" + cityid+"&starttime="+startTime+"&lasttime="+lastTime;
    }

    function delete_comment(commentid) {
        var isconfirm = confirm("确定要删除？");
        if(isconfirm) {
            $.ajax({
                url : "/console/order/comment/delete",
                type : "post",
                data : {
                    commentid:commentid,
                    cityid:cityid
                },
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        alert(data.message);
                        window.location.href="/console/order/comment/list?cityid=" + cityid;
                    } else {
                        alert(data.message);
                    }
                }
            })
        }
    }

    $(".user_list_searchbtn").click(function() {
        var search=$("input[name='search']").val();
        if(search == '') {
            return;
        }
        window.location.href = "/console/order/comment/list?cityid="+cityid+"&search="+search+"&starttime="+starttime+"&lasttime="+lasttime+"&now=" + Date.parse(new Date());
    });
    $(".bigpic_out").height($(window).height());
    $(".bigpic_img").height($(window).height());
    var pic_array = [];
    function show_pic(picturestring) {
        //解析逗号，=》array =>imagedomain
        pic_array = picturestring.split(",");
        console.log(picturestring)
        if(pic_array.length > 0){
            $(".bigpic_out").show();
            var big_imgs;
            for (var i = 0; i < pic_array.length; i++){
                if(i == 0){
                    big_imgs = '<img style="opacity: 1;" class="pic_show" src="' + imagedomain + pic_array[i] +'" alt="">';
                    $(".bigpic_img").append(big_imgs);
                }else {
                    big_imgs = '<img src="' + imagedomain + pic_array[i] +'" alt="">';
                    $(".bigpic_img").append(big_imgs);
                    if($(".bigpic_out .bigpic_img img").eq(i).height() < $(".bigpic_out .bigpic_img img").eq(i).width()){
                        $(".bigpic_out .bigpic_img img").eq(i).css({"height":"auto","width":"90%"});
                    }else{
                        $(".bigpic_out .bigpic_img img").eq(i).css({"height":"90%","width":"auto"});
                    }
                }
            }
            if($(".bigpic_out .bigpic_img img").eq(0).height() < $(".bigpic_out .bigpic_img img").eq(0).width()){
                $(".bigpic_out .bigpic_img img").eq(0).css({"height":"auto","width":"90%"});
            }else{
                $(".bigpic_out .bigpic_img img").eq(0).css({"height":"90%","width":"auto"});
            }
            $(".pic_num").html("1/" + pic_array.length);
        }
    }
    var picx = 0;
    $(".pic_right").on("click",function () {
        picx++;
        if(picx < pic_array.length){
            $(".bigpic_out .bigpic_img img").eq(picx).addClass("pic_show").siblings().removeClass("pic_show");
            $(".pic_num").html((picx+1) + "/" + pic_array.length);
        }else {
            picx = pic_array.length-1;
        }
    })
    $(".pic_left").on("click",function () {
        picx -= 1;
        if(picx < 0){
            picx = 0;
        }else {
            $(".bigpic_out .bigpic_img img").eq(picx).addClass("pic_show").siblings().removeClass("pic_show");
            $(".pic_num").html((picx+1) + "/" + pic_array.length);
        }
    })
    $(".bicpic_close").on("click",function () {
        $(".bigpic_out").hide();
        $(".bigpic_img").empty();
        picx = 0;
    })
</script>
@endsection